<style>
	#moduleSection {
		margin:10 auto;
		width:98%;
		border-width: 1px; 
		border-style: solid; 
		border-color: #D0E8E8;
        position:relative;
        overflow:auto;  
	}
	#moduleSectionDetalleAdd {
		margin:5 auto;
		//background:#FFF;
		z-index:2;
		top :240px;
		padding:5px 5px 5px;
		position:absolute;
	}
    #moduleSectionDetalleAddList {
        margin:5 auto;
        //background:#FFF;
        z-index:20;
        top :100px;
        padding:10px 10px 10px;
        position:relative;
        height:300px;
    }   
    
    .error {
    color: red;
    font-style: italic;
     }  
</style>

<body>
<script>
$(function() {
    $("#fecProgram").datepicker();
    $("#fechaReq").datepicker();
    $("#fechaSalida").datepicker();
    $("#fecProgram").datepicker( "option", "dateFormat", "yy-mm-dd" );
    $("#fechaReq").datepicker( "option", "dateFormat", "yy-mm-dd" );
    $("#fechaSalida").datepicker( "option", "dateFormat", "yy-mm-dd" );
   
});
</script>
<div id="main">
  <div id="zonaContenedor">
    <div id="module">
	   <h3>:: Salida de Mercaderia</h3>
	    <form id="form_nuevo" action="javascript:fn_guardar();">
      <div>
        	<table width="100%">
        		<tr>
        		  <td id="keyLabel" width="20%">Salida Nro</td>
      		    <td width="30">Nuevo</td>
      		    <td id="label" width="20%">Status</td>
      		    <td><input name="status" type="text"  id="status" value="" size="12" /></td>
    	      </tr>
            <tr>
              <td id="label">Tipo</td>
              <td><select name="tipo" id="tipo" class="required">
                    <option value="">-- seleccione --</option><?php
                    foreach ($a_Maestros['listaTipoSalida'] as $key => $obj){?>
                    <option value="<?php echo $obj->getValorId();?>"><?php echo $obj->getDescripcion();?></option><?php
                    }?>
                  </select>
              </td>
              <td id="label">Docum Ref</td>
              <td><input type="text" name="docRef" id="docRef" class="required" size="12" value=""/></td>
            </tr> 
        		<tr>
        		  <td id="label">Orden de Venta</td>
        		  <td><input name="poNro" type="text" size="15" value=""></td>
        		  <td id="label">Factura Nro</td>
        		  <td><input type="text" name="facturaNro" id="facturaNro" size="14" value=""/></td>
      		  </tr>
        		<tr>
        		  <td id="label">Almacen</td>
        		  <td>
        				<select name="almId" id="almId">
                    <option value="">-- seleccione --</option><?php
                    foreach ($a_Maestros['listaAlmacenes'] as $key => $obj){?>
                    <option value="<?php echo $obj->getAlmacenId();?>"><?php echo $obj->getNombre();?></option><?php
                    }?>
                </select>
        		  </td>
        		  <td id="label">Fecha Req</td>
        		  <td><input type="text" name="fechaReq" id="fechaReq" size="12" value=""/></td>
    	      </tr>                 
            <tr>
              <td id="label">Cliente</td>
              <td nowrap><input name="clienteId" type="text" id="clienteId" value="" size="12"  style="background-color:#F0F0F0"/>
                <input name="clienteNombre" type="text" id="clienteNombre" value="" size="35" maxlength="40"/></td>
              <td id="label">Fecha Programada</td>
              <td><input type="text" name="fecProgram" id="fecProgram"  size="12" value=""/></td>
            </tr>
        		<tr>
        		  <td id="label">Contacto</td>
        		  <td><input name="contacto" type="text" id="contacto" size="40" maxlength="40" value=""/></td>
        		  <td id="label">Fecha de Salida</td>
        		  <td><input type="text" name="fechaSalida" id="fechaSalida" size="12" value=""/></td>
        		  </tr>
        		<tr>
              <td id="label">Observaciones</td>
              <td>
              <textarea name="obs" cols="40" rows="2"></textarea></td>
              <td id="label" valign="top">Moneda</td>
              <td valign="top">
                <select name="moneda" id="moneda">
                  <option>-- seleccione --</option><?php
                    foreach ($a_Maestros['Moneda'] as $key => $obj){?>
                    <option value="<?php echo $obj->getValorId();?>"><?php echo $obj->getDescripcion();?></option><?php
                    }?>
                </select>
              </td>
    	      </tr>        
            <tr>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
          </table>
      </div>
      <div>
    		<table width=100%>
    			<tr>
    				<td>
    					<table cellspacing="1" cellpadding="4">
    						<tr>
    							<td id="tabFormula" bgcolor="#CCCCCC" onclick="showGrid('gridFormula')"><a>Detalle</a></td>
    							<td id="tabFase" bgcolor="#EBEBEB" onclick="showGrid('gridFase')">Condiciones comerciales  </td>                
    						</tr>
    					</table>        					
    				</td>
    				<td align=right>
              <a href="javascript:add_TR_TbodyRecep();">Agregar detalle</a>
    				</td>
    			</tr>
    		</table>
      </div>     
      <div id="gridFormula">
        <table width="100%" >
          <tr>
            <td colspan="4">
              <table width="100%" cellspacing="1" id='tableNuevoRecep'>
                <thead>
                  <tr bgcolor="#CCCCCC" >
                    <td>Codigo</td>
                    <td width="35%">Descripcion</td>
                    <td>UM</td>
                    <td>Cantidad</td>
                    <td>Costo</td>
                    <td>Subtotal</td>
                    <td></td>                                 
                  </tr>
                </thead>
                <tbody>
                </tbody>
                <tfoot>
                  <tr bgcolor="#FFFFFF">
                    <td colspan="3" bgcolor="#FFFFFF"><div align="right"></div></td>
                    <td colspan="2" bgcolor="#CCCCCC"><div align="right" >Total</div></td>
                    <td bgcolor="#CCCCCC"><div align="right" id='totalMonto'></div></td>
                    <td bgcolor="#CCCCCC"><div align="right"></div></td>            
                  </tr>
                  <tr bgcolor="#FFFFFF">
                    <td colspan="3" bgcolor="#FFFFFF"><div align="right"></div></td>
                    <td colspan="2" bgcolor="#CCCCCC"><div align="right">Descuentos</div></td>
                    <td bgcolor="#CCCCCC"><div align="right" ></div></td>
                    <td bgcolor="#CCCCCC"><div align="right"></div></td>
                  </tr>
                  <tr bgcolor="#FFFFFF">
                    <td colspan="3" bgcolor="#FFFFFF"><div align="right"></div></td>            
                    <td colspan="2" bgcolor="#CCCCCC"><div align="right">Impuestos</div></td>
                    <td bgcolor="#CCCCCC"><div align="right" id='totalImp' ></div></td>
                    <td bgcolor="#CCCCCC"><div align="right"></div></td>
                  </tr>
                  <tr bgcolor="#FFFFFF">
                    <td colspan="3" bgcolor="#FFFFFF"><div align="right"></div></td>
                    <td colspan="2" bgcolor="#CCCCCC"><div align="right"><strong>Neto</strong></div></td>
                    <td bgcolor="#CCCCCC" align='right'><div align="right" id='totalNeto'></div></td>
                    <td bgcolor="#CCCCCC"><div align="right"><strong></strong></div></td>            
                  </tr>
                </tfoot>																		
    			    </table>
            </td>
          </tr>
        </table>
        <table width="100%">
    				<tr>
    					<td width="90%" align="right"><input type="submit" name="guardar" value="Guardar"></td>
    					<td align="right"><input type="button" id="btn_cancelar"name="btn_cancelar" onclick="javascript: listarDlv()" value="Cancelar"></td>  						 
    				<tr>	
    		</table> 
        <br>&nbsp;
        <div id="moduleSectionDetalleAdd"> </div>    
      </div>
    </form>

<div id="gridFase" style="top:237px"></div>

</div>
  <div id="footer"></div>
  <div id="moduleSectionDetalleAddList"> </div>
</div> 
</body>

<script>

var iCorrelativoRecep = 0;

add_TR_TbodyRecep = function ()
{
  
  iCorrelativoRecep = iCorrelativoRecep+1
  
  var id_ItemCode = "itemCode_"+iCorrelativoRecep;
  
  var sTr='';
	sTr+="<tr bgcolor='#FFFFFF'>";
	sTr+="<td ><input type='text' itemG='itemG' id='"+id_ItemCode+"' name='a_ItemId["+iCorrelativoRecep+"]' size='15' style='width: 100px;' class='loadF2 required' ></td>";
	sTr+="<td id='txtDesc' desc='desc'>&nbsp;</td>";
	sTr+="<td UoM='UoM'>&nbsp;</td>";
	sTr+="<td ><input type='text' cant='cant' name='a_Cant["+iCorrelativoRecep+"]' size='5' class='number required' style='text-align:right' ></td>";
	sTr+="<td ><input type='text' cost='cost' name='a_Costo["+iCorrelativoRecep+"]' size='5' class='number required' style='text-align:right' ></td>";
	sTr+="<td monto='monto' align='right' >&nbsp;</td>";
    sTr+="<td align='right'><img border='0' style='cursor:pointer' title='Eliminar Registro' src='/gourmet-express/trunk/imgs/icons/delete_icon.png' onclick='delete_TR_TbodyRecep(this)'></td>"; 		
    sTr+="</tr>";
    
  $("#tableNuevoRecep tbody").append(sTr);
    
  loadAutocompleteItem(id_ItemCode);
    
    cantKeyupEvent();
    costKeyupEvent();
}

delete_TR_TbodyRecep = function (obj)
{
 $(obj).parents('tr').first().remove();
 evalMontos();
 
}  


cantKeyupEvent = function()
{
  $("#tableNuevoRecep tbody tr td input[cant='cant']").keyup(function(){

  var objKey = $(this).parent().parent();
  evalCosto(objKey);


  })
};

costKeyupEvent = function()
{
  $("#tableNuevoRecep tbody tr td input[cost='cost']").keyup(function(){

  var objKey = $(this).parent().parent();
  evalCosto(objKey);


  })
};

evalCosto = function (objKey)
{
  var s_cant = $(objKey).children('td').children("input[cant='cant']").val();
  var s_cost = $(objKey).children('td').children("input[cost='cost']").val();
  
  if(s_cant && s_cost)
  {
    var montoTotReg = parseInt(s_cant)*parseFloat(s_cost);
    $(objKey).children("td[monto='monto']").text(montoTotReg.toFixed(2));
  }else{
    $(objKey).children("td[monto='monto']").text('');
  }
  evalMontos();
}

evalMontos = function ()
{

  totMont = 0;
  totImp  = 0;
  totNeto = 0;
  
  $("td[monto='monto']").each(function() { 
            //add only if the value is number
            if(!isNaN($(this).text()) && $(this).text().length!=0) {
                totMont += parseFloat($(this).text());
            }          
  });
  
  totImp  = totMont * 0.18;
  totNeto = totMont + totImp;
  
  $("#totalMonto").html(totMont.toFixed(2));
  $("#totalImp").html(totImp.toFixed(2));
  $("#totalNeto").html(totNeto.toFixed(2));
}



/*
$("#tableNuevoRecep tbody tr td input[cant='cant']").keyup(function(){
   var lalal = $(this).parent().parent();
   var ssss = $(lalal).children('td').children("input[cant='cant']").val();
   $(lalal).children("td[monto='monto']").text(ssss);
 
});*/


//$("#form_nuevo").validate();

$("#form_editar").validate({
		rules: {
			clienteId: "required",
			poNro: "required",
			fechaReq: "required",
			contacto: "required",
			docRef: "required",
			fecProgram: "required",
			facturaNro: "required",
			fechaSalida:"required",
			moneda:"required"
		},
		messages: {
			clienteId: "Ingrese Cod Proveedor",
			poNro: "Ingrese Nro de Compra",
			fechaReq: "Ingrese Fecha de Req",
			contacto: "Ingrese Contacto",
			docRef: "Ingrese Doc Ref",
			fecProgram: "Ingrese Fecha Programada",
			facturaNro: "Ingrese Factura",
			fechaSalida: "Ingrese Fecha de Salida",
			moneda: "Seleccione Moneda"
		}
});


	
loadAutocompleteCliente('clienteNombre');

</script>
</html>
